 class Enlarge {
     //  this   enlarge1/enlarge2
     constructor(el) {
         // 需要获取的标签
         this.el = document.querySelector(el)
         this.imgObj = this.el.querySelector('.img')
         this.maskObj = this.el.querySelector('.mask')
         this.enlargeObj = this.el.querySelector('.enlarge')
          // 开关
         this.init()
         }
     
     
 

 //  启动
 init() {
     this.overOut()
     this.maskMove()
    //  this.tbEnlarge(x, y)
 }

 // 鼠标在图片上移入移出
 overOut() {
     this.imgObj.onmouseover=()=>this.maskObj.style.display = this.enlargeObj.style.display = 'block'
     this.imgObj.onmouseout=()=>this.maskObj.style.display = this.enlargeObj.style.display = 'none'

 }

 // 鼠标移动
 maskMove() {
     this.imgObj.onmousemove=(evt)=>{
         let e=evt||window.event
         let x=e.pageX-this.imgObj.offsetLeft-this.maskObj.offsetWidth/2
         let y=e.pageY-this.imgObj.offsetTop-this.maskObj.offsetHeight/2
         if(x<0){x=0}
         if(y<0){y=0}
         let maxX=this.imgObj.clientWidth-this.maskObj.offsetWidth
        //  console.log(this.el.clientHeight);
         let maxY=this.imgObj.clientHeight-this.maskObj.offsetHeight
        //  console.log( maxY==maxX);
         if(x>maxX){x=maxX}
         if(y>maxY){y=maxY}
         this.maskObj.style.left=x+'px'
         this.maskObj.style.top=y+'px'
         this.tbEnlarge(x, y) 
     }
 }

 // 鼠标移动，同步放大镜效果
 tbEnlarge(x, y) {
    // console.log(x==y)
     this.enlargeObj.style.backgroundPosition=`-${x*2}px -${y*2}px`
 }

}